<template>
  <div>
    <div class="boxs">
      <div class="animate__animated animate__fadeInTopLeft">
        <div class="xie"></div>
      </div>
      <div class="lashen"></div>
      <div class="tu animate__animated animate__zoomIn sudu">
        <img src="./img/vip.png" alt="" />
      </div>
      <!-- 字 -->
      <div :class="xi">
        <p>全民k歌VIP</p>
        <p>7大特权尊贵体验</p>
        <a href="" class="yuan">开通VIP</a>
      </div>
      <!-- 6*5圆圈 -->
      <div class="yuana">
        <ul :style="sty1">
          <li>
            <div class="yuanquan"></div>
          </li>
          <li>
            <div class="yuanquan"></div>
          </li>
          <li>
            <div class="yuanquan"></div>
          </li>
          <li>
            <div class="yuanquan"></div>
          </li>
          <li>
            <div class="yuanquan"></div>
          </li>
        </ul>
        <ul :style="sty2">
          <li>
            <div class="yuanquan2"></div>
          </li>
          <li>
            <div class="yuanquan2"></div>
          </li>
          <li>
            <div class="yuanquan2"></div>
          </li>
          <li>
            <div class="yuanquan2"></div>
          </li>
          <li>
            <div class="yuanquan2"></div>
          </li>
        </ul>
        <ul :style="sty3">
          <li>
            <div class="yuanquan3"></div>
          </li>
          <li>
            <div class="yuanquan3"></div>
          </li>
          <li>
            <div class="yuanquan3"></div>
          </li>
          <li>
            <div class="yuanquan3"></div>
          </li>
          <li>
            <div class="yuanquan3"></div>
          </li>
        </ul>
        <ul :style="sty4">
          <li>
            <div class="yuanquan4"></div>
          </li>
          <li>
            <div class="yuanquan4"></div>
          </li>
          <li>
            <div class="yuanquan4"></div>
          </li>
          <li>
            <div class="yuanquan4"></div>
          </li>
          <li>
            <div class="yuanquan4"></div>
          </li>
        </ul>
        <ul :style="sty5">
          <li>
            <div class="yuanquan5"></div>
          </li>
          <li>
            <div class="yuanquan5"></div>
          </li>
          <li>
            <div class="yuanquan5"></div>
          </li>
          <li>
            <div class="yuanquan5"></div>
          </li>
          <li>
            <div class="yuanquan5"></div>
          </li>
        </ul>
        <ul :style="sty6">
          <li>
            <div class="yuanquan6"></div>
          </li>
          <li>
            <div class="yuanquan6"></div>
          </li>
          <li>
            <div class="yuanquan6"></div>
          </li>
          <li>
            <div class="yuanquan6"></div>
          </li>
          <li>
            <div class="yuanquan6"></div>
          </li>
        </ul>
      </div>
      <div class="lasheng"></div>
      <!-- 小粉拉升 -->
      <div :class="feng">
        <div :class="huang"></div>
      </div>
      <div class="xiexian xiexian1"></div>
      <div class="xiexian2 xiexian3"></div>
      <div class="line"></div>
      <!-- 7*3圆圈 -->
      <div class="yuana1">
        <ul :style="sty7">
          <li>
            <div class="yuanquan7"></div>
          </li>
          <li>
            <div class="yuanquan7"></div>
          </li>
          <li>
            <div class="yuanquan7"></div>
          </li>
        </ul>
        <ul :style="sty6">
          <li>
            <div class="yuanquan6"></div>
          </li>
          <li>
            <div class="yuanquan6"></div>
          </li>
          <li>
            <div class="yuanquan6"></div>
          </li>
        </ul>
        <ul :style="sty5">
          <li>
            <div class="yuanquan5"></div>
          </li>
          <li>
            <div class="yuanquan5"></div>
          </li>
          <li>
            <div class="yuanquan5"></div>
          </li>
        </ul>
        <ul :style="sty4">
          <li>
            <div class="yuanquan4"></div>
          </li>
          <li>
            <div class="yuanquan4"></div>
          </li>
          <li>
            <div class="yuanquan4"></div>
          </li>
        </ul>
        <ul :style="sty3">
          <li>
            <div class="yuanquan3"></div>
          </li>
          <li>
            <div class="yuanquan3"></div>
          </li>
          <li>
            <div class="yuanquan3"></div>
          </li>
        </ul>
        <ul :style="sty2">
          <li>
            <div class="yuanquan2"></div>
          </li>
          <li>
            <div class="yuanquan2"></div>
          </li>
          <li>
            <div class="yuanquan2"></div>
          </li>
        </ul>
        <ul :style="sty1">
          <li>
            <div class="yuanquan"></div>
          </li>
          <li>
            <div class="yuanquan"></div>
          </li>
          <li>
            <div class="yuanquan"></div>
          </li>
        </ul>
      </div>
      <div class="xiaobai animate__animated animate__fadeInLeftBig yimiao">
        <img src="./img/xiaobai.png" alt="" />
      </div>
      <div class="dahuang animate__animated animate__fadeInTopRight yimiao">
        <img src="./img/xiaohuang.png" alt="" />
      </div>
      <div class="xiaolan animate__animated animate__bounceInLeft yimiao">
        <img src="./img/xiaolan.png" alt="" />
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="box3">
      <div class="box_top">
        <div class="box_top_box" @click="url">
          <div class="center">
            <span class="icon_show1"></span>
            <span class="icon_show2"></span>
            <span class="icon_show3"></span>
          </div>
          <p>外显特权</p>
          <p>红名和尊贵图标</p>
        </div>
        <div class="box_top_box" @click="url">
          <div class="center">
            <span class="icon_rich1"></span>
            <span class="icon_rich2"></span>
          </div>
          <p>财富特权</p>
          <p>每日领取更多鲜花</p>
        </div>
        <div class="box_top_box" @click="url">
          <div class="center">
            <span class="icon_song1"></span>
            <span class="icon_song2"></span>
          </div>
          <p>音质特权</p>
          <p>高品质伴奏和录音</p>
        </div>
      </div>
      <div class="box_bottom">
        <div
          class="box_top_box"
          @click="url"
          style="display: flex; justify-content: center"
        >
          <span class="icon_down1"></span>
          <span class="icon_down2"></span>
          <p>下载特权</p>
          <p>离线播放、导出作品</p>
        </div>
        <div
          class="box_top_box"
          @click="url"
          style="display: flex; justify-content: center"
        >
          <span class="icon_family1"></span>
          <span class="icon_family2"></span>
          <span class="icon_family3"></span>
          <p>家族特权</p>
          <p style="margin-top: 30px">创建家族笼络人气</p>
        </div>
        <div
          class="box_top_box"
          @click="url"
          style="display: flex; justify-content: center"
        >
          <span class="icon_file1"></span>
          <span class="icon_file2"></span>
          <p>投稿特权</p>
          <p>快速增长作品听众</p>
        </div>
        <div
          class="box_top_box"
          @click="url"
          style="display: flex; justify-content: center"
        >
          <span class="icon_up1"></span>
          <span class="icon_up2"></span>
          <p>上传特权</p>
          <p>站外制作站内秀</p>
        </div>
      </div>
    </div>
    <!-- 第三部分 -->
    <div class="footer">
      <p>VIP成长体系</p>
      <p>VIP成长速度：10点/天，年费VIP成长速度：15点/天</p>
      <p>开通VIP</p>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li style="border-bottom-style: solid"></li>
      </ul>
      <img src="./img/vip_chart_off.png" class="biaoge" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xi: "animate__animated animate__fadeInTopRight box1",
      sty1: " transition: all ease-out .5s; opacity:0",
      sty2: " transition: all ease-out .5s; opacity:0",
      sty3: " transition: all ease-out .5s; opacity:0",
      sty4: " transition: all ease-out .5s; opacity:0",
      sty5: " transition: all ease-out .5s; opacity:0",
      sty6: " transition: all ease-out .5s; opacity:0",
      sty7: " transition: all ease-out .5s; opacity:0",
      sty8: " transition: all ease-out .5s; opacity:1",
      feng: "xiaofeng animate__animated animate__fadeInDownBig yanchi",
      huang: "xiaohuang",
    };
  },
  mounted() {
    setTimeout(() => {
      this.xi = "box1 box2";
    }, 1000);
    // 小粉延迟拉升效果
    setTimeout(() => {
      this.feng = "xiaofeng1 xiaofeng";
    }, 1000);
    setTimeout(() => {
      this.huang = "xiaohuang1 xiaohuang";
    }, 1000);

    setTimeout(() => {
      this.sty1 = this.sty8;
    }, 2470);
    setTimeout(() => {
      this.sty2 = this.sty8;
    }, 2385);
    setTimeout(() => {
      this.sty3 = this.sty8;
    }, 2300);
    setTimeout(() => {
      this.sty4 = this.sty8;
    }, 2225);
    setTimeout(() => {
      this.sty5 = this.sty8;
    }, 2150);
    setTimeout(() => {
      this.sty6 = this.sty8;
    }, 2085);
    setTimeout(() => {
      this.sty7 = this.sty8;
    }, 2000);

    new this.$wow.WOW().init();
  },
  methods: {
    url() {
      this.$router.push("/tequan");
    },
  },
};
</script>

<style scoped>
.xiaolan {
  width: 120px;
  height: 40px;
  position: absolute;
  left: 40%;
  bottom: 140px;
}
.xiaolan img {
  width: 100%;
  height: 100%;
}
.dahuang {
  /* width: 700px;
    height: 700px; */
  position: absolute;
  left: 23%;
  top: 360px;
}
.dahuang img {
  width: 90%;
  height: 90%;
}
.yimiao {
  animation-delay: 1s;
}
.xiaobai {
  width: 250px;
  height: 70px;
  position: absolute;
  left: 10%;
  bottom: 170px;
}
.xiaobai img {
  width: 100%;
  height: 100%;
}
.boxs {
  width: 100%;
  height: 680px;
  background: url(./img/vip_main.png) no-repeat;
  position: relative;
  overflow: hidden;
  z-index: 999;
}

.box1 {
  position: absolute;
  top: 280px;
  right: 200px;
  z-index: 4;
  overflow: hidden;
}

.box2 {
  animation: ping 1 1s forwards ease;
}

@keyframes ping {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-80px);
  }
}

.box1 p {
  font-size: 48px;
  color: #fff;
}

.box1 p:nth-child(2) {
  padding-top: 10px;
}

.yuan {
  display: block;
  width: 200px;
  height: 50px;
  margin: 15px auto 0;
  background-color: #fc1717;
  border-radius: 50px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  -webkit-transition: all 0.3s ease-in;
}

.tu {
  margin-top: -58px;
  margin-left: -539px;
}

.xie {
  margin-left: 80px;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(45deg);
  transition: all 0.5s ease-in-out 0.5s;
  /* transform: translate3d(-50%,-100%,0) rotate(45deg); */
  width: 600px;
  height: 270px;
  background-color: rgba(255, 255, 255, 0.4);
  /* transform: rotate(45deg); */
  transform-origin: center top;
}

.sudu {
  --animate-duration: 0.6s;
}

.lasheng {
  width: 60px;
  height: 0px;
  background-color: #7a7cff;
  border-radius: 0 0 50px 50px;
  position: absolute;
  top: 0;
  left: 331px;
  z-index: 2;
  animation: la 1 1.5s forwards ease;
  transition: all ease-out 0.75s;
  animation-delay: 1s;
}

@keyframes la {
  0% {
    height: 0px;
  }

  50% {
    height: 200px;
  }

  100% {
    height: 110px;
  }
}

.haonan {
  width: 100%;
  height: 680px;
  display: block;
}

.yuana {
  width: 300px;
  height: 400px;
  display: flex;
  position: absolute;
  top: 20px;
  left: 240px;
  z-index: 4;
}
.yuana1 {
  width: 300px;
  height: 400px;
  display: flex;
  position: absolute;
  left: 50%;
  top: 550px;
  z-index: 4;
}
.yuana li,
.yuana1 li {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
}

.yuanquan {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
}

.yuanquan2 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #fff;
}

.yuanquan3 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

.yuanquan4 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fff;
}

.yuanquan5 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}

.yuanquan6 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #fff;
}
.yuanquan7 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
}

.xiexian {
  width: 25px;
  height: 1000px;
  background: linear-gradient(
    to bottom,
    rgba(104, 220, 229, 1) 0,
    rgba(104, 220, 229, 0) 100%
  );
  position: absolute;
  top: 102%;
  left: 42%;
  transform: rotate(225deg);
  transform-origin: center top;
  opacity: 0.7;
  z-index: 3;
}

.xiexian2 {
  width: 25px;
  height: 520px;
  background: linear-gradient(
    to top,
    rgba(244, 214, 79, 1) 0,
    rgba(244, 214, 79, 0) 100%
  );
  position: absolute;
  top: 55%;
  left: 80%;
  transform: rotate(225deg);
  transform-origin: center top;
  opacity: 0.7;
  z-index: 3;
}

.xiexian1 {
  animation-delay: 2s;
  transition: all ease-out 0.3s;
  animation: xian 1 0.3s forwards ease;
}

@keyframes xian {
  0% {
    height: 0;
  }

  25% {
    height: 250px;
  }

  50% {
    height: 500px;
  }

  70% {
    height: 750px;
  }

  100% {
    height: 1000px;
  }
}

.xiexian3 {
  animation-delay: 2s;
  transition: all ease-out 0.3s;
  animation: xiana 1 0.3s forwards ease;
}

@keyframes xiana {
  0% {
    height: 0;
  }

  25% {
    height: 150px;
  }

  50% {
    height: 300px;
  }

  70% {
    height: 450px;
  }

  100% {
    height: 620px;
  }
}

.xiaofeng {
  width: 60px;
  height: 75px;
  border-radius: 50px;
  position: absolute;
  top: 20%;
  left: 50%;
  background-color: #eb5a81;
}

.yanchi {
  --animation-delay: 4s;
}

.xiaofeng1 {
  animation: feng 1 1s forwards ease;
}

@keyframes feng {
  0% {
    height: 75px;
  }

  50% {
    height: 105px;
  }

  100% {
    height: 75px;
  }
}

.xiaohuang {
  width: 17px;
  height: 21px;
  border-radius: 50px;
  margin-left: 43px;
  background-color: rgb(240, 214, 76);
}

.xiaohuang1 {
  animation: huang 1 1s forwards ease;
}

@keyframes huang {
  0% {
    height: 17px;
  }

  50% {
    height: 30px;
  }

  100% {
    height: 17px;
  }
}

.box3 {
  margin: 0 auto;
  width: 1200px;
  height: 508px;
}

.box_top {
  margin: 0 auto;
  width: 900px;
  height: 264px;
  display: flex;
  text-align: center;
}

.box_top_box {
  flex: 1;
  position: relative;
}

.box_top_box p {
  position: absolute;
  top: 160px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400px;
  font-size: 18px;
  color: #000;
}

.box_top_box p:nth-child(3) {
  position: absolute;
  top: 190px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400px;
  font-size: 18px;
  color: grey;
}

.box_top_box:hover {
  background-color: rgb(244, 244, 244);
}

.center {
  position: absolute;
  top: 50px;
  left: 32%;
  transform: translateX(-50%);
}

/* 外显特权 */
.icon_show1 {
  display: block;
  width: 43px;
  height: 58px;
  background: url("./img/vip1.png");
  background-position: -342px -214px;
  position: absolute;
  left: 0;
  top: 28px;
}

.box_top_box:hover .icon_show1 {
  position: absolute;
  left: -20px;
  top: 28px;
  transition: all ease-out 0.3s;
  animation: show1 0.6s ease-in both;
}

@keyframes show1 {
  from {
    position: absolute;
    left: -20px;
    top: 28px;
    opacity: 0.1;
  }

  to {
    position: absolute;
    left: 0;
    top: 28px;
    opacity: 1;
  }
}

.icon_show2 {
  display: block;
  width: 73px;
  height: 73px;
  background: url("./img/vip1.png");
  background-position: -114px -122px;
  position: absolute;
  left: 18px;
  top: 18px;
}

.icon_show3 {
  display: block;
  width: 43px;
  height: 58px;
  background: url("./img/vip1.png");
  background-position: -342px -144px;
  position: absolute;
  left: 66px;
  top: 28px;
}

.box_top_box:hover .icon_show3 {
  position: absolute;
  left: -86px;
  top: 28px;
  transition: all ease-out 0.7s;
  animation: show3 0.6s ease-in both;
}

@keyframes show3 {
  from {
    position: absolute;
    left: 86px;
    top: 28px;
    opacity: 0.1;
  }

  to {
    position: absolute;
    left: 66px;
    top: 28px;
    opacity: 1;
  }
}

.icon_rich1 {
  display: block;
  width: 110px;
  height: 110px;
  background: url("./img/vip1.png");
  background-position: 0 0;
  position: absolute;
  left: 48%;
}

.icon_rich2 {
  display: block;
  width: 110px;
  height: 110px;
  background: url("./img/vip1.png");
  background-position: -122px 0;
  position: absolute;
  left: 50%;
}

.box_top_box:hover .icon_rich2 {
  animation: rich2 0.6s ease-in both;
}

@keyframes rich2 {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -360deg);
    opacity: 0;
  }

  to {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.icon_song1 {
  display: block;
  width: 86px;
  height: 86px;
  background: url("./img/vip1.png");
  background-position: -244px 0;
  position: absolute;
  left: 12px;
  top: 12px;
}

.icon_song2 {
  display: block;
  width: 34px;
  height: 56px;
  background: url("./img/vip1.png");
  background-position: -417px 0;
  position: absolute;
  right: -109px;
  top: 10px;
}

.box_top_box:hover .icon_song2 {
  animation: song2 0.6s ease-in both;
}

@keyframes song2 {
  0% {
    transform-origin: right top;
    transform: none;
    opacity: 0;
  }

  100% {
    transform-origin: right top;
    transform: rotate3d(0, 0, 1, 25deg);
    opacity: 1;
  }
}

.box_bottom {
  width: 1200px;
  height: 244px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.box_bottom > div p:nth-child(3) {
  font-weight: 400px;
  font-size: 18px;
  color: #000;
  white-space: nowrap;
}

.box_bottom > div p {
  width: 100%;
  text-align: center;
}

.box_bottom > div p:nth-child(4) {
  font-weight: 400px;
  font-size: 18px;
  color: grey;
}

.icon_down1 {
  margin-top: 60px;
  display: block;
  width: 80px;
  height: 80px;
  background-image: url(./img/vip1.png);
  background-position: -244px -98px;
}

.icon_down2 {
  display: block;
  width: 40px;
  height: 44px;
  background-image: url(./img/vip1.png);
  background-position: 0 -357px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 75px;
}

.box_top_box:hover .icon_down2 {
  animation: down2 0.6s ease-in both;
}

@keyframes down2 {
  0% {
    position: absolute;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    top: 40px;
  }

  100% {
    opacity: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 75px;
  }
}

.icon_family1 {
  display: block;
  width: 26px;
  height: 32px;
  background-image: url(./img/vip1.png);
  background-position: -417px -112px;
  position: absolute;
  top: 76px;
  left: 100px;
  transform: translateX(-50%);
}

.box_top_box:hover .icon_family1 {
  animation: family1 0.6s ease-in both;
}

@keyframes family1 {
  0% {
    opacity: 0;
    position: absolute;
    top: 76px;
    left: 85px;
    transform: translateX(-50%);
  }

  100% {
    opacity: 1;
    position: absolute;
    top: 76px;
    left: 100px;
    transform: translateX(-50%);
  }
}

.icon_family3 {
  display: block;
  width: 26px;
  height: 32px;
  background-image: url(./img/vip1.png);
  background-position: -417px -68px;
  position: absolute;
  top: 76px;
  right: 74px;
  transform: translateX(-50%);
}

.box_top_box:hover .icon_family3 {
  animation: family3 0.6s ease-in both;
}

@keyframes family3 {
  0% {
    opacity: 0;
    position: absolute;
    top: 76px;
    right: 59px;
    transform: translateX(-50%);
  }

  100% {
    opacity: 1;
    position: absolute;
    top: 76px;
    right: 74px;
    transform: translateX(-50%);
  }
}

.icon_family2 {
  display: block;
  width: 62px;
  height: 78px;
  background-image: url(./img/vip1.png);
  background-position: 0 -207px;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.icon_file1 {
  display: block;
  margin-top: 60px;
  width: 63px;
  height: 59px;
  background-image: url(./img/vip1.png);
  background-position: -342px 0;
}

.box_top_box:hover .icon_file1 {
  animation: file1 0.6s ease-in both;
}

@keyframes file1 {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.icon_file2 {
  display: block;
  margin-top: 60px;
  width: 83px;
  height: 54px;
  background-image: url(./img/vip1.png);
  background-position: -74px -207px;
  position: absolute;
  top: 24px;
}

.icon_up1 {
  display: block;
  margin-top: 60px;
  width: 102px;
  height: 73px;
  background-image: url(./img/vip1.png);
  background-position: 0 -122px;
}

.icon_up2 {
  display: block;
  margin-top: 60px;
  width: 40px;
  height: 41px;
  background-image: url(./img/vip1.png);
  background-position: -52px -357px;
  position: absolute;
  top: 23px;
}

.box_top_box:hover .icon_up2 {
  animation: up2 0.6s ease-in both;
}

@keyframes up2 {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.footer {
  width: 100%;
  height: 622px;
  background-color: rgb(240, 240, 240);
  text-align: center;
}

.footer p:nth-child(1) {
  font-size: 60px;
  padding-top: 60px;
  font-weight: 400;
  color: #000;
}

.footer p:nth-child(2) {
  font-size: 18px;
  color: grey;
}

.footer p:nth-child(2) {
  font-size: 18px;
  color: grey;
}

.footer p:nth-child(3) {
  width: 200px;
  height: 50px;
  margin: 15px auto 30px;
  background-color: #fc1717;
  border-radius: 50px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

.footer li {
  height: 20px;
  border-bottom: 1px dashed #ddd;
}

.biaoge {
  margin-top: -307px;
}

/* 左下角的小粉 */
.line {
  position: absolute;
  left: 15%;
  bottom: 60px;
  width: 64px;
  height: 26px;
  background-color: #eb5a81;
  border-radius: 26px;
  animation: line 1.5s ease-in-out 1.2s both;
}

@keyframes line {
  0% {
    width: 0;
    transform: translate3d(-60px, -60px, 0) rotate(45deg);
  }

  40% {
    width: 128px;
    transform: translate3d(20px, 20px, 0) rotate(45deg);
  }

  100% {
    width: 64px;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
}
</style>